<template>
  <div class="audit-status-card">
    <template v-if="cardItems.length">
      <template v-if="cardMode === 'review'">
        <StatusReviewItem :infoList="cardItems"
          :cardItemStyle="cardItemStyle"
          @countClick="jumpToMenu">
        </StatusReviewItem>
      </template>
      <template v-else-if="cardMode === 'simple'">
        <StatusSimpleItem v-for="item in cardItems"
          :key="item"
          :bgColor="item.bgColor"
          :headIcon="item.icon"
          :headName="item.name"
          :infoList="item.infoList"
          @countClick="jumpToMenu" />
      </template>
      <template v-else>
        <StatusAuditItem v-for="item in cardItems"
          :key="item"
          :bgColor="item.bgColor"
          :headIcon="item.icon"
          :headName="item.name"
          :infoList="item.infoList"
          @countClick="jumpToMenu">
        </StatusAuditItem>
      </template>
    </template>
    <template v-else>
      <StatusEmptyItem />
    </template>
  </div>
</template>

<script setup>
import StatusEmptyItem from './StatusEmptyItem.vue'
import StatusAuditItem from './StatusAuditItem.vue'
import StatusSimpleItem from './StatusSimpleItem.vue'
import StatusReviewItem from './StatusReviewItem.vue'

import { useRouter } from 'vue-router'
import { useMenuStore } from '@/stores/modules'


const props = defineProps({
  // 模式: default | simple | review
  cardMode: { type: String, default: 'default' },
  cardItems: { type: Array, default: () => ([]) },
  autoColor: { type: Boolean, default: true },
  cardItemStyle: { type: Object }
})

const router = useRouter()
const jumpToMenu = (cardInfoItem) => {
  const routeName = cardInfoItem.url ?? ''
  if (routeName) {
    const toRoute = useMenuStore().addRoutesMap[routeName]
    if (toRoute) {
      let query = {}
      let cardQuery = { wfStatus: cardInfoItem.status ?? '001' }
      query = { ...toRoute.query, }
      router.push({
        name: toRoute.name,
        query: query,
        state: {...cardQuery}
      })
    } else {
      ElMessage({ message: `菜单未授权，请联系管理员！`, type: "warning" });
      console.warn('菜单未授权，请联系管理员！')
    }
  }
}

</script>

<style lang="scss" scoped>
.audit-status-card {
	display: flex;
	margin-left: -5px;
	margin-right: -5px;
}
</style>
